import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView,Picker } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtList,AtListItem } from 'taro-ui'
import { DNavBar, Dmorinfo, DItemError, DModal } from '@/components'
import CardealerList  from './CardealerList'
import http from '@/api'
import common from '@/common'
import '../index/index.scss'
// import './mortgage.scss'
import './vehicleStatistics.scss'
export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      scrollHeight: window.screen.availHeight,
	  indPageObj:{},
	  indAreaSelect :0,
      list: [],
      listObj:{
      		  brand:[],
      		  model:[],
      		  local:[{local:'全国'}],
      		  banksData:{},
      		  carlist:[],
      }
    }
  }
  onLocalChange(e){
     let {listObj} = this.state
  	  listObj.brand = listObj.local[e.detail.value].brand
  	  listObj.model =  listObj.local[e.detail.value].models
  	  this.setState({
  	        listObj,
  			indAreaSelect:e.detail.value
  	      })
  }
  getPageOption(){
	  let that = this
	 return  [{
	  	// 按揭
	  	title:'车型排名',
	  	tabList:[{title:'品牌'},{title:'车型'}],
	  	pageKey:'mort-model',
	  	keyChange:{name:'modelsName',value:'modelsNumber'},
	  	apiName:'getMortgage',
		getList:(resc,tab)=>{
			let result = resc
			let modelStatistics = result.modelStatistics
			let {statisticsData,carlist,listObj} = that.state
			listObj.brand = modelStatistics[0].brand
			listObj.model = modelStatistics[0].models
			result.modelStatistics[0].local='全国'
			listObj.local = result.modelStatistics //地区
			listObj.banksData = result.proportionOfBanks
			return listObj[tab==1?'brand':'model']
		}
	  },
	  {
	  	title:'车商排名',
	  	tabList:[],
	  	pageKey:'mort-carShoper',
	  	keyChange:{name:'carDealerName',value:'carDealerNumber'},
	  	apiName:'getMortgage',
		getList:(resc)=>{
			let result = resc
			// listObj.carlist =
			return result.carDealerStatistics
		}
	  },
	  //垫资
	  {
	  	title:'商家排名',
	  	tabList:[{title:'金额(万元)'},{title:'数量'}],
	  	pageKey:'infor-shoper',
	  	apiName:'getInformation',
	  	keyChange: [
				{name:'advanceBusinessName',value:'amountOfAdvanceFunds'},
				{name:'advanceBusinessName',value:'numberOfAdvances'}
			],
	  	getList:(resc,tab)=>{
	  		return resc.merchantStatistics[tab==0?'mount':'quantity']
	  	},//mount
	  },
	  //盘库
	  {
	  	title:'车型排名',
	  	tabList:[{title:'品牌'},{title:'车型'}],
	  	pageKey:'Storage-model',
	  	apiName:'getStorage',
	  	keyChange: [
				{name:'brandName',value:'brandNumber'},
				{name:'modelName',value:'modelNumber'}
			],
	  	getList:(resc,tab)=>{
	  		return resc.modelStatistics[tab==0?'brand':'model']//model
	  	}
	  },
	  {
	  	title:'公司排行',
	  	tabList:[],
	  	pageKey:'Storage-company',
	  	apiName:'getStorage',
	  	keyChange:{name:'companyName',value:'companyNumber'},
	  	getList:(resc)=>{
	  		return resc.companyStatistics
	  	}
	  }]
  }
  componentWillMount() {
    // this.httpMySearchCarList()
    let { active = 0, pageKey} = this.$router.params
    // this.handleClick(+active)
	let tabs = this.getPageOption()
	if(pageKey){
		console.log('pageKey', pageKey)
		let indPageObj  = tabs.find(item=>item.pageKey==pageKey)
		let {title,apiName,tabList,getList,keyChange} = indPageObj
		this.setState({
			indPageObj,
			tabList,
			title
		},this.dealDataValName(apiName,keyChange,getList,indPageObj))
	}
  }
  componentDidShow() {
    this.setState({
      list: [],
      currPage: 1,
      totalPage: 1,
      status: false
    }, () => {
      // this.httpMySearchCarList()
    })
  }
  dealDataValName(apiName,keyChange ={value:'modelNumber',name:'modelName'},getList){
	  	  // console.log("d",http.getInformation)
	  	  //按揭统计

	  	  http[apiName]().then((data)=>{
	  		  // console.log("dfd",data)
			  if(getList){
				  let result = data
				  let list = getList(result,this.state.active)
					console.log(list)
				  list.forEach(list=>{
				  	let valueKey = Array.isArray(keyChange) ? keyChange[this.state.active].value : keyChange.value
				  	let nameKey = Array.isArray(keyChange) ? keyChange[this.state.active].name : keyChange.name
						list.value=list[valueKey]
						list.name=list[nameKey]
				  })
				  // this.state.list = list
				  console.log("稍等0",list,this.state.indPageObj)
				  this.setState({
				  	 list
				  })
			  }


	  	    })
  }
  //寻车详细
  handleDetail(item) {
    let { active } = this.state
    if (active === 1) {
      return Taro.showToast({
        title: '该寻车已过期',
        icon: 'none'
      })
    }
    // Taro.navigateTo({
    //   url: `/pages/detail/detail?id=${item.id}&status=${active + 1}`
    // })
  }
  //切换tab
  handleClick(active) {
    let {title,apiName,tabList,getList,keyChange,pageKey} = this.state.indPageObj
    this.setState({
      list: [],
      active,

    },()=>{
		pageKey!=='mort-model'&&this.dealDataValName(apiName,keyChange,getList)
	})
  }
  render() {
    let {
      active,
      list,
	  title,
	  tabList,
	  listObj,
	  indPageObj,
      indAreaSelect
    } = this.state
	let mortModelPage = indPageObj.pageKey==='mort-model'
	title = title || '车辆排名'
	// console.log("list",this.list)
    return (
      <View className='b_index b_mortgage b_vehicleStatistics'>
        <DNavBar title={indPageObj.title}></DNavBar>
        <View className='b_index__box'>
          <View className='b_index__content'>
		 {tabList.length>0&&<View className='flex-box between tabBoxList pad'>
		  <View  className={{'car_title':true,
		  coll_40:mortModelPage,
		  coll:!mortModelPage
		  }} >
		     <AtTabs tabDirection='horizontal'  swipeable={true} current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
		  </AtTabs>
		     </View>
			{mortModelPage&&<Picker mode='selector' rangeKey='local' range={listObj.local}  onChange={this.onLocalChange.bind(this)}>
			    <View className='flex-box '>
				{listObj.local[indAreaSelect].local||'全国'}
				<View className='at-icon at-icon-chevron-down'></View>
				</View>
			 </Picker>}
			 </View>}
			{!mortModelPage&&<CardealerList active={active} list={list} />}
			{mortModelPage&&<CardealerList attrProp={{name:`${active===1?'models':'brand'}Name`,value:`${active===1?'models':'brand'}Number`}}
			list={listObj[`${active===1?'model':'brand'}`]} />}
          </View>
        </View>
        </View>
    )
  }
}
